<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <link rel="stylesheet" href="/webjars/layui/css/layui.css" media="all"/>
    <style>
        html {
            background: url('images/login_bg.png') no-repeat center center fixed;
            background-size: 100% 99.9%;
        }

        .loginBody .form-parent {
            padding: 0 20px;
            width: 400px;
            height: 460px;
            position: absolute;
            left: 45%;
            top: 43%;
            margin: -150px 0 0 -150px;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            -o-box-sizing: border-box;
            box-sizing: border-box;
            background: #fff;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            box-shadow: 0 0 50px #009688;
        }

        .login_face {
            margin: -55px auto 20px;
            width: 100px;
            height: 100px;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
            border: 5px solid #fff;
            overflow: hidden;
            box-shadow: 0 0 30px #009688;
        }

        .login_face img {
            width: 100%;
            height: 100%;
        }

        .loginBody .layui-icon {
            font-size: 30px;
        }

        .loginBody .layui-icon-login-qq:hover {
            color: #d19276;
        }

        .loginBody .layui-icon-login-wechat:hover {
            color: #d27011;
        }

        .loginBody .layui-icon-login-weibo:hover {
            color: #d35d0b;
        }

        .loginBody .layui-icon-cellphone-fine:hover {
            color: #d35a2a;
        }
        .footer{position:absolute;width: 360px;height:58px;bottom:0;text-align:center;bottom: 0px;}
    </style>
</head>
<body class="loginBody">
<div class="form-parent">
    <div class="login_face"><img src="/images/ddu-1.jpg"></div>
    <div id="form"></div>
    <div class="layui-trans layui-form-item footer">
        <hr>
        <a href="/auth/qq" id="qq"><i class="layui-icon layui-icon-login-qq"></i></a>
        <a href="javascript:;" id="wechat"><i class="layui-icon layui-icon-login-wechat"></i></a>
        <a href="javascript:;" id="weibo"><i class="layui-icon layui-icon-login-weibo"></i></a>
        <a href="javascript:;" id="phone"><i class="layui-icon layui-icon-cellphone-fine"></i></a>
    </div>
</div>
</body>
<script src="/webjars/jquery/jquery.js"></script>
<script type="text/javascript" src="/webjars/layui/layui.js"></script>
<script type="text/html" id="phone_modul">
    <form class="layui-form" id="form_phone">
        <div class="layui-form-item input-item">
            <label for="mobile">手机号</label>
            <input type="text" id="mobile" name="mobile" required  lay-verify="required|phone|number" placeholder="请输入手机号" autocomplete="off" class="layui-input">

        </div>
        <div class="layui-form-item">
            <div class="layui-row">
                <div class="layui-col-xs7">
                    <label for="smsCode">验证码</label>
                    <input type="text" placeholder="请输入验证码" lay-verify="required" autocomplete="off" id="smsCode" name="smsCode"
                           class="layui-input">
                </div>
                <div class="layui-col-xs5">
                    <div style="margin-left: 20px;margin-top: 19px">
                        <a class="layui-btn layui-btn-primary" onclick="sendCode()">发送验证码</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item" style="margin-top:15px;margin-bottom:15px;">
            <input type="checkbox" name="remember-me" title="记住密码" lay-skin="primary" value="true">
            <div style="float:right;margin-top: 11px;"><a href="javascript:;" onclick="otherWay()">密码登录</a></div>
        </div>
        <div class="layui-form-item">
            <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="login-phone">登 入</button>
        </div>
    </form>
</script>
<script type="text/html" id="user-name-modul">
    <form class="layui-form" id="form-username">
        <div class="layui-form-item input-item">
            <label for="userName">用户名</label>
            <input type="text" placeholder="请输入用户名" name="user" lay-verify="required" autocomplete="off" id="userName" class="layui-input"
                   lay-verify="required">
        </div>
        <div class="layui-form-item input-item">
            <label for="password">密码</label>
            <input type="password" placeholder="请输入密码" autocomplete="off" lay-verify="required" name="pwd" id="password"
                   class="layui-input"
                   lay-verify="required">
        </div>
        <div class="layui-form-item">
            <div class="layui-row">
                <div class="layui-col-xs7">
                    <label for="code">验证码</label>
                    <input type="text" placeholder="请输入验证码" lay-verify="required" autocomplete="off" id="code" name="imageCode"
                           class="layui-input">
                </div>
                <div class="layui-col-xs5">
                    <div style="margin-left: 20px;margin-top: 19px">
                        <img id="canvas" src="/code/image?width=115&height=38" class="layadmin-user-login-codeimg">
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item" style="margin-top:15px;margin-bottom:15px;">
            <input type="checkbox" name="remember-me" title="记住密码" lay-skin="primary" value="true">
            <div style="float:right;margin-top: 13px;"><a href="javascript:;">忘记密码？</a></div>
        </div>
        <div class="layui-form-item">
            <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="login-user">登 入</button>
        </div>
    </form>
</script>
<script>
    //初始化版面
    $("#form").html($("#user-name-modul").html());
    layui.use(['form', 'element'], function () {
        var form = layui.form;
        form.on('submit(login-user)', function (data) {
            $.ajax({
                url: "/user/login"
                , type: 'post'
                , data: $('#form-username').serialize()
                , success:loginSuccess
                , error: loginError
            });
            return false;
        });
        form.on('submit(login-phone)', function (data) {
            $.ajax({
                url: "/user/login/sms"
                , type: 'post'
                , data: $('#form_phone').serialize()
                , success: loginSuccess
                , error: loginError
            });
            return false;
        });
        var loginSuccess = function(data){
            var domain = window.location.host;
            layer.msg("登录成功");
            window.location.href = "http://" + domain + "/index";
        };
        var loginError = function(data){
            console.log(data);
            layer.msg("登录失败:" + data.body);
            $("#form").html($("#user-name-modul").html());
        };

        $("#phone").click(function () {
            $("#form").html($("#phone_modul").html());
            form.render();
        });
        window.otherWay = function(){
            $("#form").html($("#user-name-modul").html());
            form.render();
        };
        window.sendCode = function(){
            var mobile = $('#mobile').val();
            var pattern = /^1[34578]\d{9}$/;
            if(mobile && pattern.test(mobile)) {
                $.ajax({
                    url: "/code/sms?mobile=" +mobile
                    , type: 'get'
                    , data: $('#form_phone').serialize()
                    , success: function (data) {
                        layer.msg("短信已发送：测试");
                    }
                    , error: function (data) {
                        console.log(data);
                        layer.msg("短信发送失败");
                    }
                });
            }else {
                layer.msg("你咋写的手机号啊");
            }
        };
    });
</script>
</html>